import { Tooltip, Tag, Avatar, Dropdown, Menu } from '@arco-design/web-react'
import { IconToTop, IconCheck } from '@arco-design/web-react/icon'
import './UserCard.css'
import { withRouter } from 'react-router-dom'

function UserCard(props) {
  const { feedItem } = props
  const { id, avatar, name, tag, time, description, type, online } = feedItem

  const handleDoubleClick = () => {
    props.history.push({
      pathname: '/messenger',
      state: { id, avatar, tag, type, name, online, description },
    })
  }

  return (
    <Dropdown
      trigger='contextMenu'
      position='bl'
      droplist={
        <Menu>
          <Menu.Item key='chat' onClick={() => handleDoubleClick()}>
            发起聊天
          </Menu.Item>
          <Menu.Item key='view' onClick={() => console.log('查看好友信息')}>
            查看好友信息
          </Menu.Item>
          <Menu.Item key='delete' onClick={() => console.log('删除好友')}>
            {type === '0' ? '删除好友' : '退出群聊'}
          </Menu.Item>
        </Menu>
      }
    >
      <div className='user-card' onDoubleClick={() => handleDoubleClick()}>
        <div className='user-card-avatar'>
          <Avatar triggerIcon={<IconToTop />} triggerType='mask' size={32}>
            <img
              className={`cant-drag-and-select${type === '1' || online ? '' : ' offline'}`}
              alt='avatar'
              src={avatar}
            />
          </Avatar>
        </div>

        <div className='user-card-main '>
          <div className='user-card-header'>
            <div className='user-card-name'>
              <p className='user-card-name-text'>{name}</p>
              <div className='user-card-name-tag'></div>
            </div>
            <div className='user-card-header-time cant-drag-and-select'>{time}</div>
          </div>
          <div className='feed-message-preview-container'>
            <div className='feed-message-preview feed-message-preview-overflow'>
              <Tooltip content={description}>
                <span className='feed-message-preview-content cant-drag-and-select'>
                  {type === '1' ? '' : online ? '[在线]' : '[离线]'}
                  {description}
                </span>
              </Tooltip>
            </div>
          </div>
        </div>

        <div className='user-card-button'>
          {/* <Tooltip content='完成'>
            <IconCheck onClick={() => {}} />
          </Tooltip> */}
        </div>
      </div>
    </Dropdown>
  )
}

export default withRouter(UserCard)
